<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
		<script type="text/javascript">var CTP_WEB_FULLPATH = "../../"</script>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>		
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.base.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.ui.component.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
        <script type="text/javascript" src="../../js/ctp/progressbar/ctp.ui.progressbar.js">
        </script>	
        
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
        <link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/progressbar.css" rel="stylesheet" type="text/css"/>

		<script type="text/javascript">
			// ctp.core.log.lvl=ctp.core.loglvl.info;
			var progressbar;
			$(document).ready(function(){ 			                 
                var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '运行进度条',
                    width: '100%',
                    onClick: startProgressbar
                });
				var button2=new ctp.ui.button({
	                id: 'button2',
	                text: '测试',
	                width: '100%',
	                onClick: progressbarTest
	            }); 
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2}]
					]
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'progressbar实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					items:[buttonsGroupbox],
                    renderTo: 'body'
                });
				//实例化一个进度条对象
				progressbar = new ctp.ui.progressbar({
					id:'progressbar',
					//style : '0',
					//boolBarImage : true,
					//barImageType:2,
					//renderTo:'buttonsGroupbox',
					renderTo:'body',
					isVisible:true,
					txStatus:'进度：',			
					txComplete:'完成'
				});
                function startProgressbar(){
					//将进度条居中，锁屏
					progressbar.addScreenLock();
					progressbar.setCenter();
					progressbar.show();
					//运行进度条，进度为30%
					progressbar.goProcessOn({
						fromStep:'0%',
						toStep: '30%',
						period: '100',
						perStep: 1
					});
					setTimeout(function(){
						//取消运行进度条
						progressbar.clearInterval();
						//运行进度条，进度为70%
						progressbar.goProcessOn({
							toStep: '70%',
							period: '100',
							perStep: 1
						});
						setTimeout(function(){
							//取消运行进度条
							progressbar.clearInterval();
							//运行进度条，进度为100%
							progressbar.goProcessOn({
								toStep: '100%',
								period: '100',
								perStep: 1
							});
							setTimeout(function(){
								//取消运行进度条
								progressbar.clearInterval();
								//设置进度条进度为100%
								progressbar.setBarWidth('100%');
								setTimeout(function(){
									//删除锁屏
									progressbar.delScreenLock();
									//移除进度条对象
									progressbar.remove();
								},1000);
							},4000);
						},4000);
					},5000);
				}
				function progressbarTest(){
						var test = [];
						test.push('ctpPackage: '+progressbar.ctpPackage+'\n');
						//test.push('getTemplate: '+progressbar.getTemplate({})+'\n');
						test.push('initEvent: '+progressbar.initEvent()+'\n');
						test.push('initSettings: '+progressbar.initSettings+'\n');
						test.push('isContainer: '+progressbar.isContainer+'\n');
						test.push('isHidden: '+progressbar.isHidden+'\n');
						test.push('isNeedRender: '+progressbar.isNeedRender+'\n');
						test.push('isNeedReset: '+progressbar.isNeedReset+'\n');
						test.push('jqDom: '+progressbar.jqDom+'\n');
						test.push('resize: '+progressbar.resize()+'\n');
						test.push('settings: '+progressbar.settings+'\n');
						test.push('type: '+progressbar.type+'\n');
						test.push('version: '+progressbar.version+'\n');
						//test.push('rendered: '+progressbar.rendered+'\n');
						//test.push('renderTo: '+progressbar.renderTo()+'\n');
						//test.push('render: '+progressbar.render()+'\n');
						//test.push('remove: '+progressbar.remove()+'\n');
						alert(test.join(''));

						test = [];
						//test.push('afterInit: '+progressbar.afterInit()+'\n');
						//test.push('destroy: '+progressbar.destroy()+'\n');
						test.push('getCtpWebType: '+progressbar.getCtpWebType()+'\n');
						test.push('getDefaultSettings: '+progressbar.getDefaultSettings()+'\n');
						test.push('getDomId: '+progressbar.getDomId()+'\n');
						test.push('getFnContext: '+progressbar.getFnContext()+'\n');
						test.push('getHeight: '+progressbar.getHeight()+'\n');
						test.push('getId: '+progressbar.getId()+'\n');
						test.push('getInitSettings: '+progressbar.getInitSettings()+'\n');
						test.push('getJqDom: '+progressbar.getJqDom()+'\n');
						test.push('getName: '+progressbar.getName()+'\n');
						test.push('getPkgContext: '+progressbar.getPkgContext()+'\n');
						test.push('getSettings: '+progressbar.getSettings()+'\n');
						test.push('getWidth: '+progressbar.getWidth()+'\n');
						test.push('hide: '+progressbar.hide()+'\n');
						alert('hide');
						//test.push('init: '+statusbar.init()+'\n');
						test.push('removeJqDoms: '+progressbar.removeJqDoms()+'\n');
						test.push('setWidth: '+progressbar.setWidth('400px')+ ' ' + (progressbar.getWidth()==400) +'\n');
						test.push('setHeight: '+progressbar.setHeight('50px')+ ' ' + (progressbar.getHeight()==50) + '\n');
						test.push('setSize: '+progressbar.setSize('400px','100px')+ ' ' + (progressbar.getHeight()==100 && progressbar.getWidth()==400) + '\n');
						test.push('show: '+progressbar.show()+'\n');
						alert('show')
						alert(test.join(''));

						test = [];
						test.push('getBarTemplate: '+progressbar.getBarTemplate()+'\n');
						test.push('setBarWidth: '+progressbar.setBarWidth('50%')+'\n');
						alert('setBarWidth');
						test.push('setVisible: '+progressbar.setVisible(true)+ ' '+ (this.isHidden ==false) +'\n');
						//test.push('goProcessOn: '+progressbar.goProcessOn({perStep:15})+'\n');
						test.push('clearInterval: '+progressbar.clearInterval()+'\n');
						test.push('setCenter: '+progressbar.setCenter()+'\n');
						test.push('addScreenLock: '+progressbar.addScreenLock()+'\n');
						test.push('delScreenLock: '+progressbar.delScreenLock()+'\n');
						test.push('getProcess: '+progressbar.getProcess()+'\n');
						//test.push('goProcessIn: '+progressbar.goProcessIn({opTime:2000})+'\n');
						alert(test.join(''));
						progressbar.goProcessIn({opTime:2000});
				}
            });
		</script>
	</head>
	<body>
		<b>ctp.ui.progressbar 实例</b>
        <hr/>
        <br/>  
	</body>
</html>